<template>
  <el-row ref="radarWrap" class="secondRightBottomWrap">
    <el-row type="flex" style="flex-direction: column;flex: 1">
      <div style="display: flex;flex-direction: row">
        <el-col :span="4">
          <img width="40" src="../../../assets/images/online.png"></img>
        </el-col>
        <el-col :span="20" class="onlineTitle">{{ $store.getters.getLocation }}在线总量</el-col>
      </div>
      <el-row class="onlineNum">
        <countTo :startVal="0" :endVal="online" :decimals="isOnlineB ? 4 : 0" :duration="2000"/>
        <span v-if="isOnlineB" class="unit">万</span><span class="unit">台</span>
      </el-row>
    </el-row>
    <BarCharts style="height:calc(100% - 92px)"
      :chartData="chartDataBottom"
      :barColor="'rgba(177,237,80,.7)'"
      :title="'近7日在线总量详情'"
    />
  </el-row>
</template>

<script>
import countTo from 'vue-count-to'
import BarCharts from '@c/BarCharts'
  export default {
    name: "SecondRightBottom",
    filters: {
      parseToTenThousand(val) {
        if (val > 10000) {
          return val / 10000
        } else {
          return val
        }
      }
    },
    components: {
      countTo,
      BarCharts
    },
    props: {
      chartDataBottom: {
        type: Object,
        default: () => ({
          dataLine: [],
          dataY: []
        })
      },
      online: {
        type: Number,
        default: 0
      },
      isOnlineB: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
    }
  }
</script>

<style scoped>
.secondRightBottomWrap{
  height: 29vh;
  background: rgba(0,33,135,0.24);
  border: 1px solid rgba(14,101,187,0.66);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
.onlineTitle{
  line-height: 40px;
  text-align: left;
  padding: 0 0 0 18px;
  font-size: 16px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: rgb(243, 123, 29);
  /*background-image: linear-gradient(to bottom, rgba(14,101,187, 0.8) 0%, rgba(0,0,0,0) 35%,rgba(0, 0, 0, 0) 65%, rgba(14,101,187, 0.8) 100%);*/
}
.onlineNum{
  height: 50px;
  line-height: 50px;
  text-align: left;
  padding: 0 20px;
  color: rgb(66, 165, 233);
}
@media only screen and (min-width: 1921px) {
  .onlineNum {
    font-size: 46px;
    line-height: 80px;
    height: 80px;
  }
  .onlineTitle{
    font-size: 26px;
  }
  .unit{
    font-size: 20px;
  }
}
@media only screen and (max-width: 1920px) {
  .onlineNum {
    font-size: 46px;
    line-height: 80px;
    height: 80px;
  }
  .onlineTitle{
    font-size: 26px;
  }
  .unit{
    font-size: 20px;
  }
}
@media only screen and (max-width: 1600px) {
  .onlineNum {
    font-size: 36px;
  }
  .onlineTitle{
    font-size: 16px;
  }
  .unit{
    font-size: 16px;
  }
}
</style>

